<style>
	.main-content {
		/* margin-top: 40px; */
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 750upx;
	}

	.top-container {
		margin-bottom: 4px;
		align-items: center;
		box-sizing: border-box;
		/* height: 50px;
		display: flex;
		flex: 1; */
	}

	.clearinput {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #efeff4;
		box-sizing: border-box;
	}

	.with-fun {
		flex: 1;
		/* height: 40px; */
	}

	.with-fun .uni-icon {
		margin-right: 14px;
		font-size: 46upx;
	}

	.scan {
		/* height: 50px; */
	}

	.swiper {
		height: 400upx;
		/* margin-top: 10px; */
	}

	.swiper-item image {
		width: 100%;
		height: 400upx;
	}

	/* 中间导航 */
	.grid {
		padding: 20upx 0;
		display: flex;
		justify-content: space-around;
	}

	.grid-item {
		text-align: center;
		width: 25%;
	}

	.grid-item image {
		display: inline-block;
		width: 60%;
		height: 100%;
	}

	/* 租赁 */
	.goods-lease {
		/* margin-top: 30upx; */
		border-top: 1px solid #eee;
	}

	.goods-lease .title {
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 30upx;
		font-size: 32upx;
	}

	.goods-lease .title .line {
		margin-right: 9upx;
		background: #007AFF;
		height: 22upx;
		width: 6upx;
	}

	.uni-media-list {
		align-items: center;
	}

	.uni-media-list-logo {
		width: 180upx;
		height: 180upx;
	}

	.uni-media-list-body {
		height: 180upx;
		justify-content: space-around;
	}

	.sell-num {
		display: flex;
		/* flex: 1; */
		width: 90%;
		justify-content: space-between;
		color: #8f8f94;
	}

	.sell-num .fl {
		color: #FF0036;
	}

	.wrapper-title {
		background: #f6f6f6;
		text-align: center;
		padding: 15upx 10upx;
		/* padding-left: 48px; */
	}

	.wrapper-box {
		position: relative;
		padding-left: 48px;
	}

	.wrapper-box .line {
		position: absolute;
		content: "";
		height: 1px;
		width: 50%;
		position: absolute;
		top: 50%;
		left: 25%;
		background-color: #cbcbcb;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
	}

	.wrapper-box .name {
		position: relative;
		z-index: 10;
		padding: 0 10px;
		margin-left: 40px;
		background: #f6f6f6;
	}

	.more {
		position: relative;
		float: right;
		width: auto;
		padding: 0;
		padding-right: 38upx;
		font-size: 26upx;
	}

	.more.uni-list-cell-navigate.uni-navigate-right:after {
		right: 12upx;
	}

	.more-arrow {
		font-family: uniicons;
		content: '\E583';
		position: absolute;
		right: 12upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	/* 租赁 */
	.lease-wraper {
		overflow: hidden;
	}

	.lease-item {
		width: 25%;
		padding: 5px 5px 5px 8px;
		float: left;
		box-sizing: border-box;
		border-right: 1upx solid #f5f5f5;
	}

	.lease-item:last-child {
		border: none;
	}
    .lease-title{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.lease-item .lease-des {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #FF5959;
	}

	.lease-item .lease-img image {
		width: 90%;
		max-height: 160upx;
	}

	/* 加盟店 */
	.store-wraper {
		overflow: hidden;
	}

	.store-item {
		width: 50%;
		float: left;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		/* padding: 6px 8px; */
		padding: 12px 16px;
		border-bottom: 1upx solid #f5f5f5;
		overflow: hidden;
	}

	.store-item:nth-child(2n+1) {
		border-right: 1upx solid #f5f5f5;
	}

	.store-content {
		float: left;
		padding: 0 5px 0 0;
		box-sizing: border-box;
		width: 180upx;
	}

	.store-img {
		display: inline-block;
		float: right;
	}

	.store-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.store-des {
		color: #D663E1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 1.4;
	}

	.store-img,
	.store-img image {
		width: 150upx;
		height: 150upx;
	}

	/* 商城 */
	.goods-wraper {
		padding-bottom: 20upx;
	}

	.goods-item {
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding-bottom: 8upx;
		border: 1upx solid #eee;
	}
    
	.grid-item .nav1{
		background: url('http://59.110.234.118:9200/app/imgs/nav1.jpg') no-repeat;
	}
	.grid-item .nav2{
		background: url('http://59.110.234.118:9200/app/imgs/nav2.jpg') no-repeat;
	}
	.grid-item .nav3{
		background: url('http://59.110.234.118:9200/app/imgs/nav3.jpg') no-repeat;
	}
	.grid-item .nav4{
		background: url('http://59.110.234.118:9200/app/imgs/nav4.jpg') no-repeat;
	}
	.grid-item .nav{
		margin: 0 auto;
		width: 60%;
		height: 100upx;
		background-size: 100% 100%;
		background-position: center;
	}
	.goods-item:nth-child(2n+1) {
		padding-right: 4upx;
	}

	.goods-item:nth-child(2n) {
		padding-left: 4upx;
	}

	.goods-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		height: 50upx;
		line-height: 50upx;
	}

	.goods-content {
		padding: 8upx;
	}

	.goods-des {
		color: #f23030;
		font-size: 36upx;
	}

	.price {
		font-size: 24upx;
	}

	.goods-img,
	.goods-img image {
		width: 100%;
		vertical-align: top;
	}
</style>
<template>
	<view class="main-content">
		<!-- 顶部 -->
		<!-- 		<view class="top-container">
			<view class="uni-form-item uni-column clearinput">
				<view class="with-fun">
					:value="inputClearValue" @input="bindClearInput"
					<input class="uni-input" placeholder="带清除按钮的输入框" v-model="inputClearValue" />
					<view class="uni-icon uni-icon-clear"  v-if="inputClearValue" @click="clearIcon"></view>
				</view>
				<uni-icon class="scan" @click="scanFun()" type="scan" size="30"></uni-icon>
			</view>
		</view> -->
		<!-- 轮播图 -->
		<swiper class="swiper" v-if="bannerList.length>0" :indicator-dots="true" :circular="true" :autoplay="true" :interval="4000" :duration="200">
			<swiper-item class="swiper-img" v-for="(item,index) in bannerList" :key="index">
				<view  class="swiper-item" @click="toUrl(item)">
					<image :src="item.img"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 九宫格 -->
		<view class="grid">
			<view class="grid-item" @click="toLeaseList">
				<!-- <image src="../../static/img/nav1.png" mode="aspectFit" alt=""></image> -->
				<!-- <image :src="navimgs[0]" ></image> -->
				<view class="nav nav1"></view>
				<view>租赁</view>
			</view>
			<view class="grid-item" @click="toStoreList">
				<!-- <image src="../../static/img/nav2.png" mode="aspectFit" alt=""></image> -->
				<!-- <image :src="navimgs[1]" ></image> -->
				<view class="nav nav2"></view>
				<view>加盟店</view>
			</view>
			<view class="grid-item" @click="toShop">
				<!-- <image src="../../static/img/nav3.png" mode="aspectFit" alt=""></image> -->
				<!-- <image :src="navimgs[2]" ></image> -->
				<view class="nav nav3"></view>
				<view>商城</view>
			</view>
			<view class="grid-item" @click="share">
				<!-- <image :src="navimgs[3]" ></image> -->
				<view class="nav nav4"></view>
				<view>分享</view>
			</view>
		</view>

		<view class="goods-lease">
			<!-- 租赁 -->
			<view class="wrapper-title">
				<view class="wrapper-box">
					<text class="line"></text>
					<text class="name">租赁</text>
					<view @click="toLeaseList" class="more uni-list-cell-navigate uni-navigate-right">
						更多
					</view>
				</view>
			</view>
			<view class="lease-wraper">
				<view class="lease-item" @click="toLeaseDetail(item)" v-for="(item,index) in leaseList" :key="index">
					<view class="lease-title">{{item.name}}</view>
					<view class="lease-des">{{item.content ? item.content :''}}</view>
					<view class="lease-img">
						<image :src="item.pic ? item.pic : 'https://img10.360buyimg.com/n2/s350x350_jfs/t1/22448/32/3734/427585/5c2b5c05Ee117c322/e962e61b7621731c.jpg!q70.jpg'" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 加盟店 -->
			<view class="wrapper-title">
				<view class="wrapper-box">
					<text class="line"></text>
					<text class="name">加盟店</text>
					<view @click="toStoreList" class="more uni-list-cell-navigate uni-navigate-right">
						更多
					</view>
				</view>
			</view>
			<view class="store-wraper">
				<view class="store-item" @click="toStoreDetail(item)" v-for="(item,index) in storeList" :key="index">
					<view class="store-content">
						<view class="store-title">{{item.name}}</view>
						<view class="store-title store-des">{{item.content}}</view>
						<view class="store-title store-des" v-if="item.ratio != 1">{{item.ratio*10}}折</view>
					</view>
					<view class="store-img">
						<image :src="item.logo" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 商城 -->
			<view class="wrapper-title">
				<view class="wrapper-box">
					<text class="line"></text>
					<text class="name">商城</text>
					<view @click="toShop" class="more uni-list-cell-navigate uni-navigate-right">
						更多
					</view>
				</view>
			</view>
			<view class="goods-wraper overHidden">
				<view class="goods-item" @click="toShopDetail(item)" v-for="(item,index) in goodsList" :key="index">
					<view class="goods-img">
						<image :src="item.pic" :style="{height:imgW+'px'}"></image>
					</view>
					<view class="goods-content">
						<view class="goods-title">{{item.name}}</view>
						<view class="goods-des">
							<text class="price">¥</text> {{item.price}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="title"> <text class="line"></text> 物品租赁</view>
			<view class="lease-list">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
						<view class="uni-media-list">
							<image class="uni-media-list-logo" :src="item.img"></image>
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">{{item.title}}</view>
								<view class="uni-media-list-text-bottom uni-ellipsis">{{item.content}}</view>
								<view class="sell-num">
									<text class="fl">¥35</text>
									<text class="fr">已租30</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	import {
		mapState,mapMutations
	} from 'vuex'
	export default {
		components: {
			uniIcon
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		data() {
			return {
				inputClearValue: '',
				showClearIcon: '',
				imgs: [
// 					'https://img.yzcdn.cn/2.jpg',
// 					'https://img.yzcdn.cn/2.jpg',
					'http://59.110.234.118:9200/app/imgs/2.jpg',
					'http://59.110.234.118:9200/app/imgs/2.jpg'
				],
				imgW: '',
				navimgs:[
					'http://59.110.234.118:9200/app/imgs/nav1.jpg',
					'http://59.110.234.118:9200/app/imgs/nav2.jpg',
					'http://59.110.234.118:9200/app/imgs/nav3.jpg',
					'http://59.110.234.118:9200/app/imgs/nav4.jpg'
				],
				list: [{
					img: 'https://img.yzcdn.cn/2.jpg',
					title: '125456',
					content: '125456125456'
				}],
				leaseList: [
// 					{
// 						name: '新日电池',
// 						bname: '续航100公里',
// 						img: 'https://img10.360buyimg.com/n2/s350x350_jfs/t1/22448/32/3734/427585/5c2b5c05Ee117c322/e962e61b7621731c.jpg!q70.jpg'
// 					}
				],
				storeList: [
// 					{
// 						title: '新日电动车专卖店',
// 						des: '石家庄棉六店',
// 						img: 'https://img.alicdn.com/bao/uploaded/i3/3299935258/TB1_KV_dsrI8KJjy0FhXXbfnpXa_!!2-item_pic.png_1152x1920Q50s50.jpg_.webp'
// 					}
				],
				goodsList: [
// 					{
// 						title: 'YOMO 华为mate20 pro手机壳/ mate20rs保时捷版手机壳',
// 						des: '25',
// 						img: 'https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/17353/33/1878/512224/5c171a9aE683f69ad/aa5e3369075b37e2.jpg!q70.dpg'
// 					},
// 					{
// 						title: '华为mate20pro钢化软膜mate20手机贴膜全屏高清防指纹20x前后隐形水凝膜',
// 						des: '49',
// 						img: 'https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/8499/30/8913/343769/5c1218feE402fd99e/76848461353cbdc6.jpg!q70.dpg'
// 					},
					// 					{
					// 						title:'MateBook X Pro 13.9英寸笔记本电脑高清透明键盘膜',
					// 						des:'29',
					// 						img:'https://img10.360buyimg.com/mobilecms/s372x372_jfs/t17065/308/2549753631/382426/804cd84a/5af9297cNd80c6307.jpg!q70.dpg'
					// 					},
					// 					{
					// 						title:'Mate20 Pro玻璃壳手机壳保护套 全包防摔钢化玻璃背板镜面后盖',
					// 						des:'39',
					// 						img:'https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/9950/13/1482/348655/5bce7640E57cb18a8/f145193d604ef1ae.jpg!q70.dpg'
					// 					}
				],
				bannerList:[
					
				]
			}
		},
		onPullDownRefresh() {
			this.getWindowInfo()
			this.getLeaseList()
			this.getStoreList()
			this.getGoodsList()
			this.getBanner()
			uni.stopPullDownRefresh();
		},
		onLoad() {
			this.getWindowInfo()
			this.getLeaseList()
			this.getStoreList()
			this.getGoodsList()
			this.getBanner()
		},
		onShow() {
			let uid = uni.getStorageSync('uid');
			if(uid){
				this.setUid(uid)
			}
		},
		methods: {
			...mapMutations(['setUid']),
			share(){
				uni.setClipboardData({
					data: 'http://59.110.234.118/download/index.html',
					success: function () {
						uni.showToast({
							title:'分享链接已复制'
						})
					}
				});
			},
			toUrl(item){
				if(item.type == 3){
					uni.navigateTo({
						url:'../storeList/storeDetail/storeDetail?bid='+item.busId
					})
				}else if(item.type == 4){
					uni.navigateTo({
						url:'../shop/shopGoods/shopGoods?gid='+item.busId
					})
				}else if(item.type == 0){
					plus.runtime.openURL(item.busId)
				}
				
			},
			getLeaseList() {
				let that = this
				uni.request({
					url: this.httpUrl + 'leaseRes/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						pageNum: 1,
						pageSize: 4,
						status:1
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.leaseList = res.data.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getStoreList() {
				let that = this
				uni.request({
					url: this.httpUrl + 'business/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						pageNum: 1,
						pageSize: 4,
						status:1,
						category:1
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							that.storeList = res.data.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getGoodsList() {
				let that = this
				uni.request({
					url: this.httpUrl + 'goods/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						pageNum: 1,
						pageSize: 20,
						topflag:1
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							that.goodsList = res.data.data.data
							// that.goodsList.push(...res.data.data.data)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getBanner(){
				let that = this
				uni.request({
					url: this.httpUrl + 'banner/listByCondition',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						module: 1
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.bannerList = res.data.data
							// that.goodsList.push(...res.data.data.data)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			toLeaseList() {
				uni.navigateTo({
					url: '../leaseList/leaseList'
				})
			},
			toLeaseDetail(item) {
				uni.navigateTo({
					url:'../leaseList/leaseDetail/leaseDetail?item='+JSON.stringify(item)
				})
			},
			// 门店列表
			toStoreList() {
				uni.navigateTo({
					url: '../storeList/storeList'
				})
			},
			toStoreDetail(item) {
// 				uni.navigateTo({
// 					url: '../storeList/storeDetail/storeDetail?item='+JSON.stringify(item)
// 				})
				uni.navigateTo({
					url: '../storeList/storeDetail/storeDetail?bid='+item.bid
				})
			},
			toShop() {
				uni.navigateTo({
					url: '../shop/shop'
				})
			},
			toShopDetail(item) {
				uni.navigateTo({
					url: '../shop/shopGoods/shopGoods?gid='+item.gid
				})
			},
			getWindowInfo() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.imgW = (res.windowWidth - 4) / 2
					}
				});
			},
			imgLoad(e) {
				console.log(e)
			},
			bindClearInput() {

			},
			clearIcon() {
				this.inputClearValue = ''
			},
			scanFun() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			tologin() {
				if (!this.hasLogin) {
					uni.showModal({
						title: '未登录',
						content: '您未登录，需要登录后才能继续',
						/**
						 * 如果需要强制登录，不显示取消按钮
						 */
						showCancel: !this.forcedLogin,
						success: (res) => {
							if (res.confirm) {
								/**
								 * 如果需要强制登录，使用reLaunch方式
								 */
								if (this.forcedLogin) {
									uni.reLaunch({
										url: '../login/login'
									});
								} else {
									uni.navigateTo({
										url: '../login/login'
									});
								}
							}
						}
					});
				}
			}
		}
	}
</script>
